<template>
  <div class="menu-content-container">
    <!-- 内容头部 -->
    <div class="content-header">
      <div class="header-icon">
        <Icon icon="ep:data-line" />
      </div>
      <h4 class="header-title">统计详情</h4>
      <div class="header-badge">
        <el-tag :type="menuIndex == 1 ? 'primary' : 'success'" size="small">
          {{ menuIndex == 1 ? '客户联系' : '客户群' }}
        </el-tag>
      </div>
    </div>

    <!-- 时间线内容 -->
    <div class="timeline-container">
      <el-timeline v-if="cardList.length > 0" class="custom-timeline">
        <el-timeline-item
          v-for="(item, index) in cardList"
          :key="item.id || index"
          :timestamp="'统计日期: ' + formatDate(item.statTime, 'YYYY-MM-DD')"
          placement="top"
          class="timeline-item"
        >
          <div class="stats-card">
            <!-- 客户联系统计 -->
            <div v-if="menuIndex == 1" class="stats-grid">
              <div class="stat-item">
                <div class="stat-icon apply-icon">
                  <Icon icon="ep:plus" />
                </div>
                <div class="stat-content">
                  <div class="stat-number">{{ item.newApplyCnt || 0 }}</div>
                  <div class="stat-label">发起申请数</div>
                </div>
              </div>

              <div class="stat-item">
                <div class="stat-icon contact-icon">
                  <Icon icon="ep:user-filled" />
                </div>
                <div class="stat-content">
                  <div class="stat-number">{{ item.newContactCnt || 0 }}</div>
                  <div class="stat-label">新增客户数</div>
                </div>
              </div>

              <div class="stat-item">
                <div class="stat-icon chat-icon">
                  <Icon icon="ep:chat-dot-round" />
                </div>
                <div class="stat-content">
                  <div class="stat-number">{{ item.chatCnt || 0 }}</div>
                  <div class="stat-label">聊天总数</div>
                </div>
              </div>

              <div class="stat-item">
                <div class="stat-icon message-icon">
                  <Icon icon="ep:message" />
                </div>
                <div class="stat-content">
                  <div class="stat-number">{{ item.messageCnt || 0 }}</div>
                  <div class="stat-label">发送消息数</div>
                </div>
              </div>

              <div class="stat-item">
                <div class="stat-icon reply-icon">
                  <Icon icon="ep:chat-line-round" />
                </div>
                <div class="stat-content">
                  <div class="stat-number">{{ item.replyPercentage || '0%' }}</div>
                  <div class="stat-label">已回复聊天占比</div>
                </div>
              </div>

              <div class="stat-item">
                <div class="stat-icon time-icon">
                  <Icon icon="ep:timer" />
                </div>
                <div class="stat-content">
                  <div class="stat-number">{{ item.avgReplyTime || '0分钟' }}</div>
                  <div class="stat-label">平均首次回复时长</div>
                </div>
              </div>
            </div>

            <!-- 客户群统计 -->
            <div v-if="menuIndex == 2" class="stats-grid">
              <div class="stat-item">
                <div class="stat-icon new-group-icon">
                  <Icon icon="ep:plus" />
                </div>
                <div class="stat-content">
                  <div class="stat-number">{{ item.newChatCnt || 0 }}</div>
                  <div class="stat-label">新增客户群</div>
                </div>
              </div>

              <div class="stat-item">
                <div class="stat-icon total-group-icon">
                  <Icon icon="ep:chat-dot-round" />
                </div>
                <div class="stat-content">
                  <div class="stat-number">{{ item.chatTotal || 0 }}</div>
                  <div class="stat-label">截至当天客户群总数</div>
                </div>
              </div>

              <div class="stat-item">
                <div class="stat-icon active-group-icon">
                  <Icon icon="ep:chat-line-round" />
                </div>
                <div class="stat-content">
                  <div class="stat-number">{{ item.chatHasMsg || 0 }}</div>
                  <div class="stat-label">截至当天发过消息的客户群</div>
                </div>
              </div>

              <div class="stat-item">
                <div class="stat-icon new-member-icon">
                  <Icon icon="ep:user-filled" />
                </div>
                <div class="stat-content">
                  <div class="stat-number">{{ item.newMemberCnt || 0 }}</div>
                  <div class="stat-label">客户群新增群人数</div>
                </div>
              </div>

              <div class="stat-item">
                <div class="stat-icon total-member-icon">
                  <Icon icon="ep:user" />
                </div>
                <div class="stat-content">
                  <div class="stat-number">{{ item.memberTotal || 0 }}</div>
                  <div class="stat-label">截至当天客户群总人数</div>
                </div>
              </div>

              <div class="stat-item">
                <div class="stat-icon active-member-icon">
                  <Icon icon="ep:message" />
                </div>
                <div class="stat-content">
                  <div class="stat-number">{{ item.memberHasMsg || 0 }}</div>
                  <div class="stat-label">截至当天发过消息的群成员</div>
                </div>
              </div>

              <div class="stat-item">
                <div class="stat-icon msg-total-icon">
                  <Icon icon="ep:chat-dot-round" />
                </div>
                <div class="stat-content">
                  <div class="stat-number">{{ item.msgTotal || 0 }}</div>
                  <div class="stat-label">截止当天客户群消息数</div>
                </div>
              </div>
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>

      <!-- 空状态 -->
      <div v-else class="empty-container">
        <el-empty description="暂无统计数据" class="custom-empty">
          <template #image>
            <div class="empty-icon">
              <Icon icon="ep:data-analysis" />
            </div>
          </template>
          <template #description>
            <div class="empty-text">
              <p class="empty-title">暂无统计数据</p>
              <p class="empty-subtitle">请选择左侧用户查看统计信息</p>
            </div>
          </template>
        </el-empty>
      </div>
    </div>
  </div>
</template>

<script setup>
import { formatDate } from '@/utils/formatTime'

defineOptions({ name: 'MenuContent' })

const props = defineProps({
  cardList: Array,
  menuIndex: String
})

const { cardList, menuIndex } = toRefs(props)
</script>

<style scoped lang="scss">
// 主题色变量
$primary-color: #0052cc;
$primary-light: rgba(0, 82, 204, 0.1);
$primary-border: rgba(0, 82, 204, 0.3);
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$info-color: #909399;
$text-primary: #303133;
$text-regular: #606266;
$text-secondary: #909399;
$text-placeholder: #c0c4cc;
$border-color: #dcdfe6;
$border-light: #e4e7ed;
$bg-color: #f5f7fa;
$shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$shadow-base:
  0 2px 4px rgba(0, 0, 0, 0.12),
  0 0 6px rgba(0, 0, 0, 0.04);
$border-radius: 12px;
$border-radius-small: 8px;

.menu-content-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: $border-radius-small;
  overflow: hidden;
}

/* 内容头部 */
.content-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
  border-bottom: 1px solid $border-light;
  flex-shrink: 0;

  @media (max-width: 768px) {
    padding: 12px 16px;
    gap: 8px;
  }
}

.header-icon {
  width: 32px;
  height: 32px;
  background: $primary-color;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  flex-shrink: 0;

  @media (max-width: 768px) {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
}

.header-title {
  font-size: 16px;
  font-weight: 600;
  color: $text-primary;
  margin: 0;
  flex: 1;

  @media (max-width: 768px) {
    font-size: 14px;
  }
}

.header-badge {
  flex-shrink: 0;

  .el-tag {
    border-radius: 6px;
    font-weight: 500;
  }
}

/* 时间线容器 */
.timeline-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;

  @media (max-width: 768px) {
    padding: 16px;
  }

  /* 滚动条美化 */
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 82, 204, 0.3);
    border-radius: 3px;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(0, 82, 204, 0.5);
    }
  }
}

/* 自定义时间线 */
.custom-timeline {
  :deep(.el-timeline-item) {
    padding-bottom: 24px;

    @media (max-width: 768px) {
      padding-bottom: 20px;
    }

    .el-timeline-item__timestamp {
      font-size: 13px;
      color: $text-secondary;
      font-weight: 500;
      background: $primary-light;
      padding: 4px 12px;
      border-radius: 12px;
      border: 1px solid $primary-border;

      @media (max-width: 768px) {
        font-size: 12px;
        padding: 3px 10px;
      }
    }

    .el-timeline-item__node {
      background: $primary-color;
      border-color: $primary-color;
      width: 12px;
      height: 12px;
    }

    .el-timeline-item__wrapper {
      padding-left: 24px;

      @media (max-width: 768px) {
        padding-left: 20px;
      }
    }
  }
}

/* 统计卡片 */
.stats-card {
  background: white;
  border-radius: $border-radius-small;
  padding: 20px;
  box-shadow: $shadow-base;
  border: 1px solid $border-light;
  transition: all 0.3s ease;

  @media (max-width: 768px) {
    padding: 16px;
  }

  &:hover {
    box-shadow: $shadow-light;
    transform: translateY(-2px);
  }
}

/* 统计网格 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;

  @media (max-width: 768px) {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
  }

  @media (max-width: 480px) {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

/* 统计项 */
.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #fafbff;
  border-radius: $border-radius-small;
  border: 1px solid $border-light;
  transition: all 0.3s ease;

  @media (max-width: 768px) {
    padding: 12px;
    gap: 10px;
  }

  @media (max-width: 480px) {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    padding: 10px;
  }

  &:hover {
    background: white;
    box-shadow: $shadow-base;
    transform: translateY(-1px);
  }
}

/* 统计图标 */
.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
  flex-shrink: 0;

  @media (max-width: 768px) {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  @media (max-width: 480px) {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  &.apply-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  }
  &.contact-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  }
  &.chat-icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  }
  &.message-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  }
  &.reply-icon {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  }
  &.time-icon {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  }

  &.new-group-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  }
  &.total-group-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  }
  &.active-group-icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  }
  &.new-member-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  }
  &.total-member-icon {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  }
  &.active-member-icon {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  }
  &.msg-total-icon {
    background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%);
  }
}

/* 统计内容 */
.stat-content {
  flex: 1;
  min-width: 0;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: $text-primary;
  margin-bottom: 4px;
  line-height: 1;

  @media (max-width: 768px) {
    font-size: 20px;
  }

  @media (max-width: 480px) {
    font-size: 18px;
  }
}

.stat-label {
  font-size: 13px;
  color: $text-secondary;
  font-weight: 500;
  line-height: 1.2;

  @media (max-width: 768px) {
    font-size: 12px;
  }

  @media (max-width: 480px) {
    font-size: 11px;
  }
}

/* 空状态 */
.empty-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 300px;
}

.custom-empty {
  .empty-icon {
    width: 80px;
    height: 80px;
    background: $primary-light;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: $primary-color;
    margin: 0 auto 16px;

    @media (max-width: 768px) {
      width: 64px;
      height: 64px;
      font-size: 24px;
    }
  }

  .empty-text {
    text-align: center;
  }

  .empty-title {
    font-size: 16px;
    font-weight: 600;
    color: $text-primary;
    margin: 0 0 8px 0;

    @media (max-width: 768px) {
      font-size: 14px;
    }
  }

  .empty-subtitle {
    font-size: 14px;
    color: $text-secondary;
    margin: 0;

    @media (max-width: 768px) {
      font-size: 12px;
    }
  }
}

/* 响应式优化 */
@media (max-width: 480px) {
  .content-header {
    padding: 10px 12px;
  }

  .timeline-container {
    padding: 12px;
  }

  .stats-card {
    padding: 12px;
  }

  .stats-grid {
    gap: 8px;
  }

  .stat-item {
    padding: 8px;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .menu-content-container {
    background: #374151;
  }

  .content-header {
    background: #4b5563;
    border-color: #6b7280;
  }

  .header-title {
    color: #f9fafb;
  }

  .stats-card {
    background: #374151;
    border-color: #4b5563;
  }

  .stat-item {
    background: #4b5563;
    border-color: #6b7280;

    &:hover {
      background: #374151;
    }
  }

  .stat-number {
    color: #f9fafb;
  }

  .stat-label {
    color: #d1d5db;
  }

  .empty-title {
    color: #f9fafb;
  }

  .empty-subtitle {
    color: #d1d5db;
  }

  .custom-timeline {
    :deep(.el-timeline-item__timestamp) {
      background: rgba(96, 165, 250, 0.1);
      border-color: rgba(96, 165, 250, 0.3);
      color: #d1d5db;
    }

    :deep(.el-timeline-item__node) {
      background: #60a5fa;
      border-color: #60a5fa;
    }
  }
}
</style>
